<h1 class="demo-title">菜单</h1>
<div class="demo-panel">
    <div class="layout-flex">
        <div class="col-flex-1 pr20">
            <pre lang-prism class="language-html">
                    <code class="language-html">
&lt;div class="actionsheet-background" &gt;
    &lt;div class="actions-modal modal-in"&gt;
        &lt;dl class="actionsheet-font"&gt;
            &lt;dt&gt;
                同时会将我从对方的列表中删除
            &lt;/dt&gt;
            &lt;dd&gt;
                分享
            &lt;/dd&gt;
            &lt;dd&gt;
                删除
            &lt;/dd&gt;
        &lt;/dl&gt;
        &lt;dl class="actionsheet-font cancle"&gt;
            &lt;dd&gt;
                取消
            &lt;/dd&gt;
        &lt;/dl&gt;
    &lt;/div&gt;

&lt;/div&gt;
                    </code>
                </pre>
        </div>
        <div class="device-bg">
            <div class="device-content">
                <button type="button" id="btn_actionsheet" class="btn btn-xs btn-bg-blue">点击显示菜单</button>
                <div class="actionsheet-box" style="position: absolute;">
                    <div class="actions-modal modal-in actionsheet-move">
                        <dl class="actionsheet-font">
                            <dt>
                                同时会将我从对方的列表中删除
                            </dt>
                            <dd>
                                分享
                            </dd>
                            <dd>
                                删除
                            </dd>
                        </dl>
                        <dl class="actionsheet-font cancle" id="actionsheet_canvel">
                            <dd>
                                取消
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
	(function(){
		var sheet = document.querySelector(".actionsheet-box");

		document.querySelector("#btn_actionsheet")
			.addEventListener("click", function(){
				sheet.classList.add("actionsheet-in");
			});

		document.querySelector("#actionsheet_canvel")
			.addEventListener("click", function(){
				sheet.classList.remove("actionsheet-in");
			});
	})();

</script>
